<template>
  <div class="song-travels clearfix">
    <div class="travels-top">
      <h3 v-if="songconte.interestingInfo" class="travels-title">{{songconte.interestingInfo.interest_title }}</h3>
      <div class="tranvels-con">
        <div class="tranvels-time">
          <span>创建时间：</span>
          <span v-if="songconte.interestingInfo">{{ songconte.interestingInfo.interest_create_time }}</span>
        </div>
        <div class="travels-icon">
          <i class="icon iconfont">&#xe661;</i>
          <span>{{  songconte.comment_num }}</span>
          <i class="icon iconfont">&#xe630;</i>
          <span>{{ songconte.tiezi_num }}</span>
        </div>
      </div>
    </div>
    <div v-if="songconte.interestingInfo" class="tranvels-conten">

      <p v-html="change(songconte.interestingInfo.interest_cont)"></p>

    </div>
    <div class="tranvels-image">
      <img v-for="(element,index) in songconte.related_read" :src=" element.related_read_pic" alt="">
    </div>
      <div class="tranvels-comment">
        <div class="comment-infor">
          <i class="icon iconfont">&#xe611;</i>
          <span v-for="(element,index) in songconte.labels" :key="index">{{ element }}</span>
        </div>
        <div class="comment-fabulous">
          <i class="icon iconfont">&#xe634;</i>
        </div>
      </div>
      <div class="comment-praised">
        <p class="praised-title">{{ "赞过的人 (" + songconte.concern_num +")" }}</p>
        <ul class="praised-img">
          <li v-for="(element,index) in songconte.who_zan" :key="index">
            <img :src="element.zan_icon" alt="">
            <p>{{ element.zan_name }}</p>
          </li>
        </ul>
      </div>
      <div class="comment-text">
        <textarea cols="50" rows="5">在这里发表你的看法吧！</textarea>
      </div>
      <div class="comment-com" @click="checkHandle">
        评论
      </div>
      <div class="comment-logo">
        <ul>
          <li>
            <i class="icon iconfont">&#xe7a1;</i>
          </li>
          <li>
            <i class="icon iconfont">&#xe68c;</i>
          </li>
          <li>
            <i class="icon iconfont">&#xe63b;</i>
          </li>
          <li>
            <i class="icon iconfont">&#xe68c;</i>
          </li>
          <li>
            <i class="icon iconfont">&#xe61c;</i>
          </li>
          <li>
            <i class="icon iconfont">&#xe63e;</i>
          </li>
          <li>
            <i class="icon iconfont">&#xe657;</i>
          </li>
        </ul>
        <div class="comment-like">
          喜欢的话就分享出去吧！
        </div>
        <div class="comment-share">
          <span>分享长微博</span>
          <p>举报</p>
        </div>
      </div>
      <div class="comment-img">
        <img src="../../assets/images/details1_640_300.jpg" alt="">
    </div>
      </div>
</template>
<script>
export default {
  name: 'SongTravels',
  data() {
    return {

    }
  },
  components: {},
  methods: {
    change: function(content) {
      var reg = /\r\n/g;
      content = content.replace(reg, "<br />");
      return content;
    },
    checkHandle(event) {
      if (localStorage.getItem('username')) {
        console.log("已登录")
        // 把评论发送给
      } else {
        this.$router.push('Login')
      }
    }

  },
  props: {
    songconte: {
      type: Object,
      default: function() {
        return {}
      }
    }
  }

}

</script>
<style lang="css" scoped>
.song-travels {
  background-color: #fff;
  font-size: 0.16rem;
  margin-bottom: 0.2rem;
}

.travels-top {
  padding: 0.1rem;
  border-bottom: 1px solid #e0e0e0;

}

.travels-top .tranvels-con>div {
  display: inline-block;
  color: #898989;
}

.travels-toeoeoeop .travels-title {

  font-weight: 600;
  padding: 0.1rem;
  padding-bottom: 0;
}

.travels-top .tranvels-time {
  font-weight: 300;
  padding: 0.1rem 0;
  font-size: 0.14rem;
}

.travels-icon {
  float: right;
  padding: 0.1rem;
  letter-spacing: 0.02rem;
  font-size: 0.14rem;
}

.tranvels-conten {
  font-size: 0.16rem;
  color: #898989;
  padding: 0.15rem;
  letter-spacing: 0.04rem;
  line-height: 0.25rem;
}

.tranvels-image {
  width: 100%;
  height: 100%;

}

.tranvels-image img {
  width: 100%;
  height: 100%;
}

.tranvels-image img:nth-child(2) {
  padding: 0.15rem 0;
}

.tranvels-comment {
  font-size: 0.16rem;
  padding: 0.1rem;
}

.comment-infor>span {
  background-color: #999999;
  border-radius: 0.2rem;
  padding: 0.06rem 0.1rem;
  color: #fff;
}

.comment-infor i {
  font-size: 0.2rem;
  padding-right: 0.1rem;
}

.comment-fabulous {
  text-align: center;
  margin: 0.45rem 0;

}

.comment-fabulous i {
  border: 1px solid #000;
  border-radius: 50%;
  padding: 0.15rem;
  font-size: 0.4rem;
}

.comment-praised {
  padding: 0.1rem 0.2rem;
  margin-bottom: 0.2rem;
}

.praised-title {
  color: #000;
  border-left: 0.05rem solid #F68344;
  padding: 0.05rem;
}

.praised-img li {
  display: inline-block;
  padding: 0.1rem;
}

.praised-img img {
  padding-bottom: 0.1rem;
  border-radius: 50%;
}

.comment-text {
  background-color: #F7F7F7;
  margin: 0 0.2rem;
}

.comment-com {
  margin-top: 0.2rem;
  background-color: #F68344;
  width: 1rem;
  height: 0.3rem;
  color: #fff;
  margin-bottom: 0.1rem;
  text-align: center;
  line-height: 0.3rem;
  border-radius: 0.03rem;
  padding: 0.04rem;
  float: right;
  margin-right: 0.22rem;
}

.comment-logo {
  margin-top: 0.8rem;
  margin-bottom: 0.1rem;
}

.comment-logo ul li {
  width: 0.32rem;
  height: 0.32rem;
  display: inline-block;
  padding: 0.05rem;
  border: 1px solid #494949;
  border-radius: 50%;
  line-height: 0.32rem;
}

.comment-logo i {
  font-size: 0.22rem;
  text-align: center;
  padding-left: 0.05rem;
}

.comment-like {
  color: #898989;
  padding: 0.1rem;

}

.comment-share {
  width: 100%;
  padding: 0.1rem 0.1rem;
  display: inline-block;

}

.comment-share span {
  border-radius: 0.3rem;
  background-color: #E5F3F6;
  color: #75CDE1;
  padding: 0.1rem;

}

.comment-share p {
  margin-top: 0.08rem;
  float: right;
  margin-right: 0.3rem;
  font-size: 0.16rem;
  color: #898989;
}

.comment-img {
  margin-top: 0.2rem;
  width: 100%;
  margin-bottom: 0.2rem;
}

</style>
